const app = getApp()
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    },
    heartRate:{
      type: Number,
      value:0
    },
    breathRate:{
      type:Number,
      value:0
    }
  },
  data: {
    // 这里是一些组件内部数据
    canvasWidth:0,
    someData: {},
    res:null,
    query:null,
    canvas:null,
    ctx:null,
    index:0,
    flag:true,
    wid:0,
    hei:0,
    x:0,
    y:50,

    query_h:null,
    res_h:null,
    canvas_h:null,
    ctx_h:null,
    x_h:0,
    y_h:50,
    wid_h:0,
    hei_h:0,
    start_width:0,
    start_height:0,
    index_h:0,
    heartRate1:0,
    breathRate1:0

  },
  lifetimes: {
    attached: function() {
      let that = this;
      let a = 0;
      let b = 0;
      app.watch(this, {
        heartRate: function (newVal) {
          // console.log(newVal,"jjjjjj=======")
          a = newVal;
        },
        breathRate:function(newVal){
          b = newVal;
        }
      });
      setInterval(()=>{
        this.setData({
          heartRate1:a,
          breathRate1:b
        })
      },100)
    },

    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },

    ready(){
      let that = this;
      wx.getSystemInfo( {
          success: function( res ) {
              that.setData( {
                  canvasWidth: res.windowWidth
              });
          }

      });
      this.query = wx.createSelectorQuery().in(this)
      this.query_h = wx.createSelectorQuery().in(this);
      // this.setData({
      //   heartRate:app.globalData.heartRate,
      //   breathRate:app.globalData.breathRate
      // })
    }
  },

  methods: {
    
    init(){
        let that = this;
        this.query.select('#drawline')
          .fields({ node: true, size: true })
          .exec((res) => {
        
            that.res = res;                   
            that.start();
            
        })

        this.query_h.select('#heartline')
          .fields({ node: true, size: true })
          .exec((res) => {
        
            that.res_h = res;                   
            that.start_herat();
            
        })
        
    },

    start(){
      let that = this;
      that.canvas = that.res[0].node                 // canvas就是我们要操作的画布节点
      that.ctx = that.canvas.getContext('2d')        // 以2d模式，获取一个画布节点的上下文对象
      
      // 不加这段，矩形底部会显示不全，我还没看懂
      const dpr = wx.getSystemInfoSync().pixelRatio
      that.canvas.width = that.res[0].width * dpr
      that.canvas.height = that.res[0].height * dpr
      that.ctx.scale(dpr, dpr);

      that.wid = that.res[0].width;
      that.hei = that.res[0].height;
      that.x = 0;
      that.y = that.res[0].height/2;
      //设置标题
      // console.log("ctx.....",that.ctx,"resss.....",that.res);

      that.ctx.fillStyle = '#142344';
      that.ctx.fillRect(0, 0,that.res[0].width,that.res[0].height);

      
      that.ctx.strokeStyle = '#7f8aa5'; //设置画笔颜色
      that.ctx.lineJoin = 'round';      //设置画笔轨迹基于圆点拼接
      that.ctx.lineWidth = 2;           //设置画笔粗细

      that.ctx.beginPath();             //开始一条画笔的路径
      that.ctx.moveTo(that.x,that.y);   //定位起点
      
      clearInterval(that.index)
      that.index = setInterval(that.move.bind(this),30)
    },

    clear(){
      let that = this;
      // this.ctx.clearRect(0, 0,that.res[0].width,that.res[0].height);
      // this.ctx_h.clearRect(0, 0,that.res[0].width,that.res[0].height);
      that.canvas.width = 0;
      that.canvas_h.width = 0;

      clearInterval(that.index_h)
      clearInterval(that.index)

    },

    move(){
      let that = this;
      that.x++;
      if(that.x<60){

      }else if(that.x>60&&that.x<100){
        
        if(that.x>=that.wid - 60){
          that.y = that.hei/2
        }else{
          that.sport_fun()
        }
      }else if(that.x>100 && that.x<150){
        that.y = that.hei/2
      }else if(that.x>150 && that.x<200){
        if(that.x>=that.wid - 60){
          that.y = that.hei/2
        }else{
          that.sport_fun()
        }
      }else if(that.x>200 && that.x<250){
        that.y = that.hei/2
      }else{
        if(that.x>=that.wid - 60){
          that.y = that.hei/2
        }else{
          that.sport_fun()
        }
      }

      if(that.x == that.wid){
        that.ctx.closePath();
        clearInterval(that.index)
        that.index = 0;
        that.x = 0;
        that.y = that.hei/2;
        that.flag = true;
        that.start();
      }
      // console.log(that.ctx)
      that.ctx.lineTo(that.x,that.y)
      that.ctx.stroke();
    },

    sport_fun(){
      let that = this;
      var z = Math.random()*80;
      if(that.y <= z){
        that.flag = true
      }
      if((that.hei - that.y)<=z){
        that.flag = false
      }
      if(that.flag){
        that.y +=10
      }else{
        that.y -=10
      }
    },


    start_herat(){
      let that = this;
      that.canvas_h = that.res_h[0].node                 // canvas就是我们要操作的画布节点
      that.ctx_h = that.canvas_h.getContext('2d')        // 以2d模式，获取一个画布节点的上下文对象
      
      // 不加这段，矩形底部会显示不全，我还没看懂
      const dpr = wx.getSystemInfoSync().pixelRatio
      that.canvas_h.width = that.res_h[0].width * dpr
      that.canvas_h.height = that.res_h[0].height * dpr
      that.ctx_h.scale(dpr, dpr);

      that.wid_h = that.res_h[0].width;
      that.hei_h = that.res_h[0].height;
      that.x_h = 0;
      that.y_h = that.res_h[0].height/2;

      that.start_width = that.res_h[0].width;
      that.start_height = that.res_h[0].height;


      that.draw_canvs();
      that.draw_line();

      // 画个矩形运动
      clearInterval(this.index_h)
      this.index_h = setInterval(that.move_h.bind(this),20)
    },

    //创建画布
    draw_canvs(){
      let that = this;
      that.ctx_h.fillStyle = '#142344';
      that.ctx_h.fillRect(0, 0,that.res_h[0].width,that.res_h[0].height);
      
      that.ctx_h.strokeStyle = '#7f8aa5';     //设置画笔颜色
      that.ctx_h.lineJoin = 'round';          //设置画笔轨迹基于圆点拼接
      that.ctx_h.lineWidth = 2;               //设置画笔粗细
    },

    //画曲线
    draw_line(){
      let that = this;
      that.ctx_h.beginPath();                 //开始一条画笔的路径
      that.ctx_h.moveTo(that.x_h,that.y_h);   //定位起点
      that.ctx_h.arcTo(30, 0, 70, 50, 30);
      that.ctx_h.lineTo(70, 50);
      that.ctx_h.stroke();

      that.ctx_h.beginPath();                 //开始一条画笔的路径
      that.ctx_h.moveTo(70,50);               //定位起点
      that.ctx_h.arcTo(110, 100, 150, 50, 30);
      that.ctx_h.lineTo(150, 50);
      that.ctx_h.stroke();

      that.ctx_h.beginPath();                 //开始一条画笔的路径
      that.ctx_h.moveTo(170,50);              //定位起点
      that.ctx_h.lineTo(240, 50);
      that.ctx_h.stroke();

      that.ctx_h.beginPath();                 //开始一条画笔的路径
      that.ctx_h.moveTo(260,50);              //定位起点
      that.ctx_h.arcTo(290, 0, 310, 10, 20);
      that.ctx_h.lineTo(310, 10);
      that.ctx_h.stroke();

      that.ctx_h.beginPath();                 //开始一条画笔的路径
      that.ctx_h.moveTo(310,50);              //定位起点
      that.ctx_h.lineTo(330, 50);
      that.ctx_h.stroke();

      
      that.ctx_h.beginPath();
      that.ctx_h.moveTo(350,50);
      that.ctx_h.arcTo(370,100,390,50,30);
      that.ctx_h.lineTo(390,50);
      that.ctx_h.stroke();
    
    },


    move_h(){
      let that = this;
      that.x_h++;
      
      if(that.x_h >= that.start_width){
        that.ctx_h.closePath();
        clearInterval(that.index_h);
        that.ctx_h.clearRect(0,0,that.start_width,that.start_height);
        that.index_h = 0;
        that.x_h = 0;
        that.start_herat();
      }

      that.ctx_h.rect(that.x_h,0,10,that.start_height);
      that.ctx_h.fillStyle = '#142344';
      that.ctx_h.fill();

      // that.ctx_h.clearRect(that.x_h,0,10,that.start_height);
      // that.start_herat()

    }

    
  },


  

})